<template>
  <div id="index">
      <div class="container-fluid banner">
        <div class="row swiper-container">
          <ul class="swiper-wrapper">
            <li v-for="it in banner" :key="it.id" class="position-r swiper-slide">
              <img :src="it.img" class="w100" alt="">
            </li>
          </ul>
          <!-- Add Pagination -->
          <div class="swiper-pagination swiper-pagination-white"></div>
          <!-- Add Arrows -->
          <!-- <div class="swiper-button-next swiper-button-white"></div> -->
          <!-- <div class="swiper-button-prev swiper-button-white"></div> -->
        </div>
    </div>
  </div>
</template>

<script>
  import "swiper/dist/css/swiper.min.css"
  import Swiper from "swiper"
	export default {
		name: "Index",
		data () {
			return {
        banner: [
          { id: 1, img: "/static/img/2.png" },
          { id: 2, img: "/static/img/1.png" },
          { id: 3, img: "/static/img/3.png" }
        ],
			}
		},
    mounted () {
      this.$nextTick(() => {
        this.swiperInit();
      });
    },
    methods: {
      //初始化swiper
      swiperInit() {
        let that = this;

        new Swiper(".swiper-container", {
          autoplay: 5000, //可选选项，自动滑动
          autoplay: true,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          spaceBetween: 50,
          effect: "fade",
          pagination: {
            el: ".swiper-pagination",
            clickable: true
          },
          on: {
            slideChangeTransitionStart: function() {
           
            },
            slideChangeTransitionEnd: function() {
              let i = (that.indexStatus = parseInt(this.activeIndex)); //切换结束时，告诉我现在是第几个slide
            }
          }
          // navigation: {
          //   nextEl: ".swiper-button-next",
          //   prevEl: ".swiper-button-prev"
          // }
        });
      }
    }

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #index{
    margin-top: 50px;
  }
  .banner{
    padding: 0;
    .row{
      img{
        width: 100%;
      }
    }
  }
</style>
